<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;查看推荐企业详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="160px">
                <el-form-item label="企业名称：">
                        <el-input v-model="form.name" placeholder="请输入企业名称：" disabled style="width:600px"></el-input>
                </el-form-item>
                <el-form-item label="分类：">
                    <el-radio v-if="form.category == '1'" v-model="form.category" label="1" border >印刷企业</el-radio>
                    <el-radio v-if="form.category == '2'" v-model="form.category" label="2" border>包装企业</el-radio>
                    <el-radio v-if="form.category == '3'" v-model="form.category" label="3" border>数码快印</el-radio>
                    <el-radio v-if="form.category == '4'" v-model="form.category" label="4" border>设备耗材</el-radio>
                </el-form-item>
                <el-form-item label="地址：">
                    <el-input v-model="form.address" placeholder="请输入地址" disabled style="width:600px"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：">
                    <el-input v-model="form.telephone" placeholder="请输入联系电话" disabled style="width:600px"></el-input>
                </el-form-item>
                <el-form-item label="经度：">
                    <el-input v-model="form.longitude" placeholder="请输入经度" disabled style="width:600px"></el-input>
                </el-form-item>
                <el-form-item label="纬度：">
                    <el-input v-model="form.latitude" placeholder="请输入纬度" disabled style="width:600px"></el-input>
                </el-form-item>
                <el-form-item label="企业简介：">
                    <el-input type="textarea" v-model="form.summary" placeholder="请输入企业简介" disabled autosize style="width:600px"></el-input>
                </el-form-item>
                <el-form-item label="封面图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="form.headImg != ''">
                            <div class="sola-flex">
                                <img  :src="form.head_img" />
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="资质证明：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="aptitudeImg.length > 0">
                            <div v-for="(item, index) in aptitudeImg" class="sola-flex" :key="index">
                                <img  :src="item" />
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="业务详情图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="businessImg.length > 0">
                            <div v-for="(item, index) in businessImg" class="sola-flex" :key="index">
                                <img  :src="item" />
                            </div>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" plain  @click="returnList">返回列表</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>

import {getYinCDetail} from '@/api/company'

export default {
    name:"YinCDetail",
    data() {
        return {
            id:0,//印厂id
            form:{},//详情
            aptitudeImg:[],//资质证明图片数组,没有传[]
            businessImg:[],//业务类图片数组，没有传[]
        }
    },
    //实例创建
    created(){
        if(this.$route.query.id){
            this.id = this.$route.query.id;
            this.getDetail();//获取印厂详情
        }
        console.log(this.id)
    },
    //计算属性
    computed:{
   
    },
    watch:{
        
    },
    //方法
    methods: {
        //获取详情
        getDetail(){
            getYinCDetail(this.id).then(res => {
                if(res.code == 200){
                    this.form = res.data;
                    this.form.category = res.data.category.toString();
                    this.aptitudeImg = JSON.parse(res.data.aptitude_img);
                    this.businessImg = JSON.parse(res.data.business_img);
                }else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    }); 
                }
            })
        },
        
        //返回列表页
        returnList(){
            this.$router.push('/platform/list');
        },
    }
}
</script>
<style lang="stylus" scoped>
    .el-form-item .el-cascader{
        width :400px;
    }
    .el-cascader-menus .el-cascader-menu{
        width :240px
    }
    .sola-upload{
        .sola-left{
            width :100%;
            height :auto;
            .sola-flex{
                float:left;
                width: 360px;
                height: 180px;
                margin-bottom: 20px;
                margin-right:15px;
                position:relative;
                .delete{
                    position:absolute;
                    top:2px;
                    right:13px;
                    color: #f56c6c;
                    display:inline-block;
                    padding:5px 5px;
                    .el-alert__icon{font-size:28px;cursor:pointer}
                }
                img {
                    width:100%;
                    height:100%;
                }
            }
        }
        .sola-file-box{
            
            position:relative;
            .btn-file{
                position:absolute;
                top:0;
                left:0;
                z-index: 1;
                opacity:0;
                width :120px;
                height :40px;
                outline: 0;
                background-color :none;
                cursor:pointer;
            }
        }

    }
    .Hint {
        width:600px;
        font-size :14px;
        a {
            color:red;
        }
    }
    .example {
        font-size:14px;
        color:#409EFF
    }
    .mapImage {
        width:620px;
        height:600px;
    }
</style>


